<template>
    <div>
        <div style="width: 30%;
            display: inline-block">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>个人信息</span>
                    </div>
                </template>
                <template>
                <!--头像上传-->
                    <div style="text-align: center;border-radius: 50%">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8080/upload"
                                :headers="header"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius: 50%;width: 120px;height: 120px">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                <!--个人信息展示-->
                    <div class="form1">
                        <el-divider></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-user-solid">&nbsp;</i>用户名称 </span></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right"><span>{{userinfo.userName}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-phone-outline">&nbsp;</i>手机号码 </span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right">
                                    <span>{{userinfo.phonenumber}}</span></div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-s-home ">&nbsp;</i>用户邮箱 </span></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right"><span>{{userinfo.email}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-school">&nbsp;</i>所属部门 </span></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right"><span>{{deptByuserId.deptName}}/{{postByuserId.postName}}</span></div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-s-check">&nbsp;</i>所属角色 </span></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right"><span>{{userinfo.remark}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider ></el-divider>
                        <el-row style="height: 1px">
                            <el-col :span="12">
                                <div class="grid-content bg-purple"><span><i class="el-icon-date">&nbsp;</i>创建日期 </span></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light" style="text-align: right"><span>{{userinfo.createTime}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                </template>

            </el-card>
        </div>

        <div style="width: 68%;float: right">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>基本资料</span>
                    </div>
                </template>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="基本资料" name="first">
                            <el-form :model="userform" :rules="rules" ref="userform" size="small" :label-position="labelPosition" label-width="80px">
                                <el-form-item label="用户昵称" prop="nickName">
                                    <el-input v-model="userform.nickName" placeholder="请输入用户昵称"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码" prop="phonenumber">
                                    <el-input v-model="userform.phonenumber" placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email" >
                                    <el-input v-model="userform.email" placeholder="请输入邮箱"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="userform.sex">
                                    <el-radio label="0">男</el-radio>
                                    <el-radio label="1">女</el-radio>
                                </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="small" @click="saveUserform('userform')">保存</el-button>
                                    <el-button type="danger" size="small"><router-link :to="index">关闭</router-link></el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="修改密码" name="second">
                            <el-form :model="passwordform" status-icon :rules="rules" ref="passwordform" size="small" :label-position="labelPosition" label-width="80px">
                                <el-form-item label="旧密码" prop="oldpassword">
                                    <el-input v-model="passwordform.oldpassword" placeholder="请输入旧密码"></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newpassword">
                                    <el-input v-model="passwordform.newpassword" placeholder="请输入新密码"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkpassword" >
                                    <el-input v-model="passwordform.checkpassword" placeholder="请确认密码"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="small" @click="savepasswordform('passwordform')">保存</el-button>
                                    <el-button type="danger" size="small"><router-link :to="index">关闭</router-link></el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Personal",
        data(){
            //密码校验
            var oldPass = (rule, oldpassword, callback) => {
                if (oldpassword === '') {
                    callback(new Error('旧密码不能为空'));
                } else {
                    this.axios.get("http://localhost:8080/personal/checkPassword",
                        {params:{password:this.userinfo.password,
                                oldpassword:this.passwordform.oldpassword}
                        })
                        .then(res => {
                            if (res.data.data == "error"){
                                callback(new Error('旧密码输入不正确'));
                            }else {
                                callback();
                    }
                })


                }
            };
            var validatePass = (rule, newpassword, callback) => {
                if (newpassword === '') {
                    callback(new Error('新密码不能为空'));
                } else {

                    callback();
                }
            };
            var validatePass2 = (rule, checkpassword, callback) => {
                if (checkpassword === '') {
                    callback(new Error('请再次输入密码'));
                } else if (checkpassword !== this.passwordform.newpassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return{
                imageUrl:"",    //上传的头像地址
                header: {
                    "Authorization": localStorage.getItem("token"),
                },
                validatePass:"",
                index: "index",
                labelPosition: 'right',
                activeName:"first",     //基本资料首选项
                userinfo:{},
                userform:{},                 //资料表单数据
                passwordform:{
                    oldpassword: "",
                    newpassword: "",
                    checkpassword: ""
                },         //密码表单数据
                userId: "",
                deptByuserId:{},
                postByuserId:{},
                roleByuserId:{},
                rules:{

                    nickName: [
                        { required: true, message: '用户昵称不能为空', trigger: 'blur' },
                        { max: 8, message: '昵称不能超过 8 个字符', trigger: 'blur' }
                    ],
                    phonenumber: [
                        { required: true, message: '手机号码不能为空', trigger: 'blur' },
                        { max: 11, message: ' 手机号码不能超过11位', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' }
                    ],
                    oldpassword: [
                        { validator: oldPass, trigger: 'blur' }
                    ],
                    newpassword:[
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkpassword:[
                        { validator: validatePass2, trigger: 'blur' }
                    ]

                }
            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //获取用户信息
            getUser(){
                let username = localStorage.getItem("username");
                console.log(username)
                this.axios.get("http://localhost:8080/personal/getUser/"+username).then(res => {
                    this.userinfo = res.data.data;
                    // this.userform.nickName = res.data.data.nickName;
                    // this.userform.phonenumber = res.data.data.phonenumber;
                    // this.userform.email = res.data.data.email;
                    // this.userform.sex = res.data.data.sex;
                    this.userform = res.data.data;
                    this.userId = res.data.data.userId;
                    this.imageUrl = res.data.data.avatar;

                    this.axios.get("http://localhost:8080/depts/getDeptByuserId/"+this.userId).then(res=>{
                        this.deptByuserId = res.data.data;
                    });
                    this.axios.get("http://localhost:8080/personal/getPostByuserId/"+this.userId).then(res=>{
                        this.postByuserId = res.data.data;
                    })
                })
            },

            //修改用户信息
            saveUserform(userform){
                this.$refs[userform].validate((valid) => {
                        if (valid) {
                            this.axios.put("http://localhost:8080/personal/updateUserByuserId",this.userform).then(res=>{
                                if (res.data.data == "updateform"){
                                    this.$message.success("修改用户信息成功！")
                                }else {
                                    this.$message.error("修改用户信息失败!")
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                });
            },
            //修改密码
            savepasswordform(passwordform){
                this.$refs[passwordform].validate((valid) => {
                        if (valid) {
                            this.axios.get("http://localhost:8080/personal/updatePasswordByuserId",
                                {params:{userId:this.userinfo.userId,
                                         password:this.userinfo.password,
                                         newpassword:this.passwordform.newpassword,
                                         oldpassword:this.passwordform.oldpassword}
                                })
                                .then(res => {
                                    if (res.data.data == "updatepassword"){
                                        this.$message.success("修改密码成功！")
                                    }else {
                                        this.$message.error(res.data.data)

                                    }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                });

            },

            // //上传图片
            // handleAvatarSuccess(res) {
            //     // this.imageUrl = URL.createObjectURL(file.raw);
            //     console.log(res)
            //     // console.log(this.imageUrl);
            // },
            // 上传图片
            handleAvatarSuccess(res) {
                console.log(res);
                this.imageUrl = res;
                // console.log(res.data);
                this.axios.get("http://localhost:8080/getImgUrl",
                    {
                        params: {
                            userId: this.userinfo.userId,
                            avatar: this.imageUrl
                        }
                    })
                    .then(res => {
                        if (res.data == "ok") {
                            this.$message.success("头像更新成功！")
                        } else {
                            this.$message.error(res.data)
                        }
                        this.reload()
                    })
                localStorage.setItem("avatar", this.imageUrl)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        },
        created() {
            this.getUser();
        }

    }
</script>

<style scoped>


    .card-header {
        display: flex;
        justify-content: space-between;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .form1  {
        font-size: 13px;
    }
    .router-link-active {
        text-decoration: none;
    }
    a{
        text-decoration: none;
        color: white;
    }

    /*.box-card {*/
    /*    width: 480px;*/
    /*}*/


</style>